<template>
	<view class="container">
		<view class="headerContainer">
			<view class="searchItem">
				<u-search shape="round" :height="searchObj.height" :input-align="searchObj.inputAlign"
					:show-action="searchObj.showAction" placeholder="请输入姓名或手机号" @search="onSearch"
					v-model="searchObj.value"></u-search>
			</view>
			<view class="bottomWrapper">
				<view class="left">
					顾客总数
					<text class="tag">{{cardObj.total}}</text>人
				</view>
				<view class="">
					<view v-if="!multiSelectMode" class="right" @click="onMultiSelectMode">
						多选模式
					</view>
					<view v-if="multiSelectMode" class="right" @click="onMultiSelectMode">
						单选模式
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="scrollviewContainer" @scrolltolower="onScrolltolower">
			<template v-for="(card, cardIndex) in cardObj.list">
				<view class="namecardContainer" :key="card.id" @click="toSelectItem(card)">
					<view style="display: flex;align-items: center;">
						<view class="middle1">
							<image class="avatar" :src="card.avatar||'/static/img/user_img_ntx.png'" mode=""></image>
						</view>
						<view class="middle2">
							<view
								v-if="card.salesmanId&&card.protectLimitDay&&card.protectLimitDay<new Date().getTime()"
								class="tagWrapper">
								逾期
							</view>
							<view class="child">
								<view class="left">
									客户姓名：
								</view>
								<view class="name text-2line-ellipsis">
									{{card.name||''}}
								</view>
							</view>
							<view class="child">
								<view class="left">
									客户电话：
								</view>
								<view class="phone">
									{{card.phone||''}}
								</view>
							</view>
							<view class="child">
								<view class="left">
									最后浏览：
								</view>
								<view class="time">
									{{card.lastLoginTime||''}}
								</view>
							</view>


						</view>
					</view>


					<view class="right" v-if="!multiSelectMode" @click="allocateItem(card)">
						分配
						<u-icon :size="'30rpx'" color="#fff" name="arrow-right"></u-icon>
					</view>
					<view v-else class="left" :class="{leftEn: multiSelectMode}">
						<view v-if="card.selected&&multiSelectMode" style="width:100%;height: 100%;">
							<image style="width:100%;height: 100%;" src='/static/img/user_selected.png' mode=""></image>
						</view>
					</view>
				</view>
			</template>
			<view class="" style="height: 300rpx;">

			</view>
		</scroll-view>
		<view v-if="multiSelectMode" class="bottomTool">
			<view class="top" @click="onSelectAll">
				<view class="left">
					<view style="width:100%;height: 100%;" v-if="selectAll">
						<image style="width:100%;height: 100%;" src='/static/img/user_selected.png' mode=""></image>
					</view>
				</view>
				<view class="title">
					全选
				</view>
			</view>
			<view class="right" @click="allocateAll()">
				批量分配
			</view>

		</view>
		<u-popup :show="showSalesmanModal" @close="showSalesmanModal=false" mode="bottom" :round="20" :closeable="true"
			:close-icon-color="'#333333'">
			<scroll-view scroll-y="true" class="listContainer">
				<view v-for="(item,index) in salesmanCardObj.list" class="itemContainer" :key="index">
					<image class="avatar" :src="item.avatar" mode=""></image>
					<view class="middle">
						<view class="top .text-1line-ellipsis">
							{{item.name}}
						</view>
						<view class="bottom text-2line-ellipsis" style="word-wrap:break-word">
							{{item.personSignature?item.personSignature:"暂无简介"}}
						</view>
					</view>
					<view class="btn" @click="salesmanModalConfirm(item)">
						选择
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-calendar v-model="isShowCalendar" :mode="'range'" @change="changeCalendar"></u-calendar>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';

	let timeId = null
	let that = null
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	const Config = require("@/config.js")
	const TAB_sortField = ['lastLoginTime', 'createTime', 'viewTimes', 'protectLimitDay', 'followTime', 'followTime',
		'result'
	];

	export default {
		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				isReferrer: state => state.userInfo.isReferrer,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
			}),
		},
		data() {
			return {
				selectAll: false,
				multiSelectMode: false,
				addCustomerPhone: '',
				addCustomerName: '',
				addCustomerSex: null,
				addCustomerSexName: '点击选择性别',
				salesmanCardObj: {
					list: [],
					loadStatus: "loading",
					pageIndex: 1,
				},
				addCustomerSalesmanId: null,
				addCustomerSalesmanName: "点击选择顾问",
				isShowAddCustomer: false,
				isShowAllSelect: false,
				isShowCalendar: false,
				disableMask: false,
				showSexPopup: false,
				showSalesmanModal: false,
				intentionList: [
					'未知意向',
					'低意向',
					'中意向',
					'高意向',
					'必买',
					'已购买',
					'无意向'
				],
				sexList: ["女", "男", "未知"],

				visitorStatusList: [{
						key: 'NOT_VISITED',
						name: "未到访"
					},
					{
						key: 'VISITED',
						name: "到访"
					},
					{
						key: 'DEPOSIT',
						name: "认筹"
					},
					{
						key: 'ORDERED',
						name: "认购"
					},
					{
						key: 'DONE',
						name: "签约",
						end: true
					},
				],

				searchObj: {
					showAction: false,
					inputAlign: "center",
					value: "",
					height: 80,
				},
				sortObj: {
					sortField: 'lastLoginTime',
					sortOrder: 'desc',
				},

				backupCustomerItem: {},

				selectObj: {
					isSelect: false,
					phoneSelectBackup: false,
					avatarSelectBackup: false,
					intentSelectBackup: -1,
					daySelectBackup: -1,
					timeStartBackup: '',
					timeEndBackup: '',
					phoneSelect: false,
					avatarSelect: false,
					intentSelect: -1,
					daySelect: -1,
					timeStart: 0,
					timeEnd: 0,
					protectDaySelect: -1,
					protectDaySelectBackup: -1,
					followTypeSelect: -1,
					followTypeSelectBackup: -1,
					info: {
						list: ['留电话', '有头像'],
						title: '用户群'
					},
					intent: {
						list: ['已购买', '必买', '高意向', '中意向', '低意向', '无意向', '未知意向'],
						title: '意向等级'
					},
					time: {
						list: ['今日', '近7日', '近30日'],
						title: '访问时间'
					},
					followType: {
						list: ['从未跟进', '今日已跟进', '今日未跟进'],
						title: '客户跟进'
					},
					protectDay: {
						list: ['已过保护期', '未过保护期'],
						title: '保护期'
					},

				},


				dropDownObj: [{
					value: 0,
					label: '最近访问时间倒序',
					options: [{
							label: '最近访问时间倒序',
							value: 0,
						},
						{
							label: '首次访问时间倒序',
							value: 1,
						},

						{
							label: '访问次数优先',
							value: 2,
						},
						{
							label: '保护期从少到多',
							value: 3,
						},
						{
							label: '跟进时间正序',
							value: 4,
						},
						{
							label: '跟进时间倒序',
							value: 5,
						},
						{
							label: '推测意向从高到低',
							value: 6,
						},
					],
				}],
				cardObj: {
					list: [],
					loadStatus: "loading",
					pageIndex: 1,
					curPageIndex: 0,
					total: 0,
				},
			};
		},

		components: {},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			onShow: {
				type: Boolean,
				default: true,
			}
		},
		watch: {
			value: {
				handler: function observer(val) {
					var _this = this;
					if (val) {
						// this.setData({
						// 	selfShow: true
						// });
						_this.selfShow = true;
						_this.closeShow = false;
						setTimeout(() => {
							console.log("@@@@@closeshow")
							_this.closeShow = true;
						}, 2000);
					} else {
						// this.setData({
						// 	selfShow: false
						// });
						_this.selfShow = false;
					}
				},
				immediate: true
			},
			onShow: {
				handler: function observer(val) {
					var _this = this;
					if (val) {
						_this.refreshCustomerInfo()
					}
				},
				immediate: true
			},
		},
		onLoad() {
			that = this
			this.clearListShow(this.cardObj)
			this.getCustomerList()
			console.log("getCustomerList", 1111)
		},

		methods: {
			toSelectItem(record) {
				if (this.multiSelectMode) {
					record.selected = !!!record.selected
					if (!record.selected) {
						this.selectAll = false;
					} else {
						let selectAll = true;
						this.cardObj.list.forEach(t => {
							if (!t.selected) {
								selectAll = false;
								return
							}
						})
						this.selectAll = selectAll;
					}
				}
			},
			checkboxChange(data) {
				console.log(data)
			},

			changeCalendar(e) {
				that.selectObj.daySelect = -1;
				that.selectObj.timeStart = e.startDate
				that.selectObj.timeEnd = e.endDate
				console.log(e);
			},
			onShowCalendar() {
				that.isShowCalendar = true;
			},

			onShowSelectAll() {
				that.selectObj.timeStart = that.selectObj.timeStartBackup;
				that.selectObj.timeEnd = that.selectObj.timeEndBackup;
				that.selectObj.avatarSelect = that.selectObj.avatarSelectBackup;
				that.selectObj.phoneSelect = that.selectObj.phoneSelectBackup;
				that.selectObj.intentSelect = that.selectObj.intentSelectBackup;
				that.selectObj.daySelect = that.selectObj.daySelectBackup;
				that.selectObj.protectDaySelect = that.selectObj.protectDaySelectBackup;
				that.selectObj.followTypeSelect = that.selectObj.followTypeSelectBackup;
				that.isShowAllSelect = true;
			},

			onPhoneSelect() {
				that.selectObj.phoneSelect = !that.selectObj.phoneSelect
			},

			onAvatarSelect() {
				that.selectObj.avatarSelect = !that.selectObj.avatarSelect
			},
			onPassProtectDaySelect(index) {
				if (that.selectObj.protectDaySelect == index) {
					that.selectObj.protectDaySelect = -1
				} else {
					that.selectObj.protectDaySelect = index;
				}
			},
			onPassFollowTypeSelect(index) {
				if (that.selectObj.followTypeSelect == index) {
					that.selectObj.followTypeSelect = -1
				} else {
					that.selectObj.followTypeSelect = index;
				}
			},

			onIntentSelect(id) {
				if (that.selectObj.intentSelect == id) {
					that.selectObj.intentSelect = -1
				} else {
					that.selectObj.intentSelect = id
				}
			},

			onTimeSelect(id) {
				that.selectObj.timeStart = '';
				that.selectObj.timeEnd = '';
				if (that.selectObj.daySelect == id) {
					that.selectObj.daySelect = -1
				} else {
					that.selectObj.daySelect = id
				}
			},
			onSelectRest() {
				that.selectObj.isSelect = false;
				that.selectObj.timeStart = '';
				that.selectObj.timeEnd = '';
				that.selectObj.avatarSelect = false;
				that.selectObj.phoneSelect = false;
				that.selectObj.intentSelect = -1;
				that.selectObj.daySelect = -1;
				that.selectObj.protectDaySelect = -1;
				that.selectObj.followTypeSelect = -1;
				that.selectObj.timeStartBackup = that.selectObj.timeStart;
				that.selectObj.timeEndBackup = that.selectObj.timeEnd;
				that.selectObj.avatarSelectBackup = that.selectObj.avatarSelect;
				that.selectObj.phoneSelectBackup = that.selectObj.phoneSelect;
				that.selectObj.intentSelectBackup = that.selectObj.intentSelect;
				that.selectObj.protectDaySelectBackup = that.selectObj.protectDaySelect;
				that.selectObj.followTypeSelectBackup = that.selectObj.followTypeSelect;
				that.selectObj.daySelectBackup = that.selectObj.daySelect;
				that.clearListShow(that.cardObj)
				that.getCustomerList()
			},
			onSelectConfirm() {

				that.selectObj.timeStartBackup = that.selectObj.timeStart;
				that.selectObj.timeEndBackup = that.selectObj.timeEnd;
				that.selectObj.avatarSelectBackup = that.selectObj.avatarSelect;
				that.selectObj.phoneSelectBackup = that.selectObj.phoneSelect;
				that.selectObj.intentSelectBackup = that.selectObj.intentSelect;
				that.selectObj.protectDaySelectBackup = that.selectObj.protectDaySelect;
				that.selectObj.followTypeSelectBackup = that.selectObj.followTypeSelect;
				that.selectObj.daySelectBackup = that.selectObj.daySelect;

				if ((that.selectObj.timeStartBackup == '') &&
					(that.selectObj.timeEndBackup == '') &&
					(!that.selectObj.avatarSelectBackup) &&
					(!that.selectObj.phoneSelectBackup) &&
					(that.selectObj.intentSelectBackup == -1) &&
					(that.selectObj.daySelectBackup == -1)
				) {
					that.selectObj.isSelect = false;
				} else {
					that.selectObj.isSelect = true;
				}

				that.isShowAllSelect = false;
				that.clearListShow(that.cardObj)
				that.getCustomerList()
			},
			onScrolltolower() {
				that.getCustomerList()
			},

			gotoCustomerDetail(card) {
				if (this.isReferrer == 1 || this.isChannel == 1) {
					return;
				}
				this.backupCustomerItem = card;
				uni.navigateTo({
					url: '/pages/shop/customer/customerDetail?id=' + card.id
				})
			},
			refreshCustomerInfo() {
				let that = this
				if (that.backupCustomerItem && that.backupCustomerItem.id) {
					api.getCustomerDetail({
						interfaceName: that.backupCustomerItem.id,
						param: {}
					}).then(res => {
						console.log(res)
						if (res.success) {
							that.backupCustomerItem.intention = res.data.intention || 0
							that.backupCustomerItem.name = res.data.name || ''
							that.backupCustomerItem.visitorStatus = res.data.visitorStatus || ""
							that.backupCustomerItem.visitorStatusId = 0;
							that.backupCustomerItem.followTab = res.data.followTab || '从未跟进';
							var status = that.backupCustomerItem.visitorStatus && JSON.parse(that
								.backupCustomerItem.visitorStatus) || ['']
							for (let j = 0; j < that.visitorStatusList.length; j++) {
								if (that.visitorStatusList[j].key == status[0]) {
									that.backupCustomerItem.visitorStatusId = j;
								}
							}

						}
					})
				}
			},

			gotoPhone(phone) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			onSearch(e) {
				console.log("onTitleSearch:", );
				that.clearListShow(that.cardObj)
				that.getCustomerList();
			},
			onSelectAll() {
				this.selectAll = !this.selectAll;
				this.cardObj.list.forEach(t => {
					t.selected = this.selectAll;
				})
			},

			getCustomerList() {
				let that = this
				if (that.cardObj.curPageIndex != that.cardObj.pageIndex) {
					that.cardObj.curPageIndex = that.cardObj.pageIndex
					api.publicCustomers({
						param: {
							limit: 10,
							page: that.cardObj.pageIndex,
							params: that.searchObj.value,
						}
					}).then(res => {
						console.log(res)
						if (res.code == 0) {
							console.log("pushListShow", res)
							that.pushListShow(that.cardObj, res.data)
							that.cardObj.total = res.count;
						}
					})
				}
			},
			/**
			 * @description: 列表中添加数据
			 * @param {number} id   u-tabs-swiper的当前ID
			 * @param {list}  列表
			 * @return void
			 */
			pushListShow(srcObj, pushlist) {
				console.log("pushListShow", pushlist)
				if (pushlist && pushlist.length > 0) {
					for (let i = 0; i < pushlist.length; i++) {
						pushlist[i].avatar = pushlist[i].avatar || ''
						pushlist[i].name = pushlist[i].name || ''
						pushlist[i].phone = pushlist[i].phone || ''
						pushlist[i].lastLoginTime = utils.formatTime(pushlist[i].lastLoginTime, 'yyyy-MM-dd hh:mm') || ''
						pushlist[i].selected = this.selectAll;
						srcObj.list.push(pushlist[i])
					}
					srcObj.pageIndex++;

					if (pushlist.length == 10) {
						srcObj.loadStatus = "loadmore"
					} else {
						srcObj.loadStatus = "nomore"
					}
					console.log("srcObj:", srcObj)
				} else {
					srcObj.loadStatus = "nomore"
				}
			},
			allocateItem(record) {
				record.selected = true
				this.onSalesmanPopupProps()
			},
			allocateAll() {
				this.onSalesmanPopupProps()
			},
			//----清空列表
			clearListShow(srcObj) {
				srcObj.curPageIndex = 0;
				srcObj.total = 0;
				srcObj.pageIndex = 1;
				srcObj.list.splice(0, srcObj.list.length)
			},


			gotoLottery(id) {
				uni.navigateTo({
					url: "/pages/client/lottery/index?id=" + id
				})
			},

			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},



			changeSortField(index) {
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				console.log("change:", index)
				this.sortObj.sortField = TAB_sortField[index];
				if (index === 3 || index === 4) {
					this.sortObj.sortOrder = 'asc'
				}
				this.dropDownObj[0].label = this.dropDownObj[0].options[index].label
				that.clearListShow(that.cardObj)
				that.getCustomerList();
				// this.$refs.uDropdown.highlight(xxx);
			},
			changeSortOrder(index) {
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// console.log("change:", index)
				this.sortObj.sortOrder = ((index === 1 || index === 3 || index === 4) ? 'asc' : 'desc')
				this.dropDownObj[1].label = this.dropDownObj[1].options[index].label
				that.clearListShow(that.cardObj)
				that.getCustomerList();
				// this.$refs.uDropdown.highlight(xxx);
			},
			onPopupAddCustomer() {
				that.isShowAddCustomer = true;
			},

			onClear() {
				this.addCustomerPhone = ""
				this.addCustomerName = ""
				this.addCustomerSalesmanId = ""
				this.addCustomerSalesmanName = ""
				this.addCustomerSex = ""
				this.addCustomerSexName = ""
			},

			onAddCustomer() {
				let that = this
				api.addCustomerHomeActivity({
					param: {
						phone: this.addCustomerPhone,
						name: this.addCustomerName,
						sex: this.addCustomerSex,
						id: this.addCustomerSalesmanId
					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						that.addCustomerPhone = ""
						that.addCustomerName = ""
						that.addCustomerSex = null
						that.isShowAddCustomer = false;
						that.dropDownObj[0].value = 1
						that.changeSortField(1)
						uni.showModal({
							title: '提示',
							content: '提交成功~~~',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message,
							duration: 3000,
						})
					}
				})
			},
			onMultiSelectMode() {
				this.multiSelectMode = !this.multiSelectMode;
			},
			onPopupProps() {
				this.showSexPopup = true
			},
			onPickerPropConfirm(e) {
				this.addCustomerSex = e[0];
				this.addCustomerSexName = this.sexList[this.addCustomerSex];
			},
			onSalesmanPopupProps() {
				this.showSalesmanModal = true;
				this.getSalesmanList();
			},
			salesmanModalConfirm(item) {
				let salesmanId = item.id;
				this.showSalesmanModal = false;
				this.selectAll = false;
				let customerIds = [];
				this.cardObj.list.forEach(item => {
					if (item.selected) {
						customerIds.push(item.id)
					}
				})
				var params = {
					customerIds: customerIds,
					salesmanId: salesmanId
				}
				api.allocateCustomers(params).then(res => {
					if (res.success) {
						that.clearListShow(that.cardObj)
						this.getCustomerList();
					}
				})
			},
			getSalesmanList() {
				api.getSalesmanList({
					param: {

					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						that.clearSalesmanListShow(that.salesmanCardObj)
						that.pushSalesmanListShow(that.salesmanCardObj, res.data)
					}
				})
			},
			//----清空列表
			clearSalesmanListShow(srcObj) {
				// srcObj.curPageIndex = 0;
				srcObj.pageIndex = 1;
				srcObj.list.splice(0, srcObj.list.length)
			},
			/**
			 * @description: 列表中添加数据
			 * @param {number} id   u-tabs-swiper的当前ID
			 * @param {list}  列表
			 * @return void
			 */
			pushSalesmanListShow(srcObj, pushlist) {
				if (pushlist && pushlist.length > 0) {
					for (let i = 0; i < pushlist.length; i++) {
						pushlist[i].allTimes = pushlist[i].allTimes || ''
						pushlist[i].date = pushlist[i].date || ''
						pushlist[i].avatar = pushlist[i].avatar || ''
						pushlist[i].nickname = pushlist[i].nickname || ''
						pushlist[i].introduce = pushlist[i].introduce || ''
						srcObj.list.push(pushlist[i])
					}
					srcObj.pageIndex++;

					if (pushlist.length == 10) {
						srcObj.loadStatus = "loadmore"
					} else {
						srcObj.loadStatus = "nomore"
					}
				} else {
					srcObj.loadStatus = "nomore"
				}
			},

		}
	};
</script>



<style lang="scss">
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #f3f3f3;
	}

	.scrollviewContainer {
		width: 100%;
		height: calc(100% - 340rpx);
		background-color: #f3f3f3;
		margin: 18rpx 18rpx 0rpx 18rpx;
	}

	.headerContainer {
		width: 750rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: #F3F3F3 solid 1px;

		.searchItem {
			margin-top: 30rpx;
			width: 690rpx;
			margin-bottom: 30rpx;
		}

		.selected {
			height: 80rpx;
			position: absolute;
			right: 30rpx;
			z-index: 12;
			top: 0rpx;
			display: flex;
			align-items: center;
			overflow-y: scroll;

			.icon {
				height: 40rpx;
				width: 40rpx;
				margin-right: 15rpx;
			}
		}

		.selectedColorEn {
			color: #1890FF;
		}

		.bottomWrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 750rpx;
			margin-top: 20rpx;

			.left {
				height: 80rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				line-height: 80rpx;

				.tag {
					font-size: 35rpx;
					font-weight: bolder;
					margin: 0 15rpx;
					color: #1890FF;
				}
			}

			.right {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				margin-right: 20rpx;
				border: 1px #17f solid;

				padding: 0rpx 30rpx;
				border-radius: 5rpx;
				height: 60rpx;
				line-height: 44rpx;
				text-align: center;
				color: #17f;
				border-radius: 30rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.selectContainer {
		width: 650rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 1000rpx;

		.header {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			color: #333333;
			font-size: 32rpx;
		}

		.contentWraper {
			width: 100%;
			margin-bottom: 40rpx;

			.title {
				margin-left: 20rpx;
				color: #333333;
				font-size: 30rpx;
			}

			.content {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.item {
					background-color: #f6f6f6;
					color: #333333;
					width: 180rpx;
					height: 70rpx;
					border-radius: 35rpx;
					line-height: 70rpx;
					font-size: 28rpx;
					text-align: center;
					padding: 0 20rpx;
					margin-left: 20rpx;
					margin-top: 30rpx;
				}

				.itemEn {
					color: #FFFFFF;
					background-color: #1890FF;
				}

				.text {
					height: 70rpx;
					margin-left: 20rpx;
					margin-top: 30rpx;
					line-height: 70rpx;
				}
			}
		}

		.btnWrapper {
			display: flex;
			justify-content: space-evenly;
			width: 100%;
			padding-bottom: 50rpx;
			// margin-bottom: 50rpx;
			margin-top: 40rpx;

			.btn1 {
				border: 1px #1890FF solid;
				width: 250rpx;
				height: 80rpx;
				color: #1890FF;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 40rpx;
			}

			.btn2 {
				background-color: #1890FF;
				width: 250rpx;
				height: 80rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
			}
		}
	}

	.namecardContainer {
		width: 712rpx;
		height: 197rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		padding: 30rpx 30rpx;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		position: relative;

		.tagWrapper {
			position: absolute;
			right: 0;
			top: 0;
			color: #ffffff;
			background-color: #ff0000;
			height: 40rpx;
			padding: 0 10rpx;
			line-height: 40rpx;
			border-radius: 0 20rpx 0 20rpx;
		}

		.selectWrapper {
			width: 40rpx;
			height: 40rpx;
			margin-left: 22rpx;
			border-radius: 6rpx;
			margin-left: 140rpx;
		}

		.left {
			width: 40rpx;
			height: 40rpx;
			margin-left: 22rpx;
			border-radius: 6rpx;
		}

		.leftEn {
			border: solid 1px #a3a3a3;
		}

		.middle1 {
			width: 100rpx;
			height: 100rpx;
			margin-right: 10rpx;
			margin-left: 20rpx;

			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.middle2 {
			width: 360rpx;
			display: flex;
			flex-direction: column;

			.child {
				display: flex;
				flex-direction: row;
				margin-top: 8rpx;

				.left {
					font-size: 24rpx;
					width: 120rpx;
				}

				.name {
					font-family: SourceHanSansCN-Medium;
					font-size: 28rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 35rpx;
					letter-spacing: 0rpx;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.phone {
					width: 148rpx;
					font-family: SourceHanSansCN-Medium;
					font-size: 28rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 30rpx;
					letter-spacing: 0rpx;
					color: #868686;
				}

				.time {
					width: 230rpx;
					font-family: SourceHanSansCN-Medium;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 30rpx;
					letter-spacing: 0rpx;
					color: #868686;
				}
			}

		}

		.right {
			width: 130rpx;
			height: 50rpx;
			background-color: #177fff;
			border-radius: 10rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 26rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}



	}

	.bottomTool {
		border-top: #f3f3f3 solid 1px;
		width: 750rpx;
		height: 100rpx;
		bottom: 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		position: fixed;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;

		.top {
			width: 180rpx;
			display: flex;
			align-items: center;

			.left {
				width: 40rpx;
				height: 40rpx;
				margin-left: 40rpx;
				margin-right: 22rpx;
				border-radius: 6rpx;
				border: solid 1px #a3a3a3;
			}

			.title {
				width: 65rpx;
				height: 40rpx;
				font-family: SourceHanSansCN-Medium;
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #a3a3a3;
				line-height: 40rpx;
			}
		}

		.right {
			width: 130rpx;
			height: 44rpx;
			background-image: linear-gradient(90deg, #ccdcf9 0%, #97b8f1 100%);
			border-radius: 5rpx;
			line-height: 44rpx;
			text-align: center;
			color: #ffffff;
			margin-right: 105rpx;
		}
	}

	.commitContainer {
		width: 650rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;

		.title {
			// width: 120rpx;
			height: 42rpx;
			font-size: 30rpx;
			color: #1F1F1F;
			line-height: 42rpx;
			margin-top: 48rpx;
			margin-bottom: 18rpx;
		}

		.phone {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.left {
				font-size: 30rpx;
				color: #999999;
				line-height: 42rpx;
			}

			.right {
				margin-left: 60rpx;
				padding: 0 15rpx;
				width: 400rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 10rpx;
				box-sizing: content-box;
				color: #333333;
			}

			.rightBorder {
				border: 1rpx solid #BBBABA;
			}

			.rightClick {
				color: #666666;
				background-color: #eeeeee;
				text-align: center;
			}
		}

		.name {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.left {
				font-size: 30rpx;
				color: #999999;
				line-height: 42rpx;
			}

			.right {
				margin-left: 60rpx;
				padding: 0 15rpx;
				width: 400rpx;
				height: 72rpx;
				box-sizing: content-box;
				line-height: 72rpx;
				border-radius: 10rpx;
				border: 1rpx solid #BBBABA;
				color: #333333;
			}
		}

		.btnWrapper {
			display: flex;
			justify-content: center;
			margin-top: 100rpx;
			margin-bottom: 50rpx;

			.btn1 {
				width: 240rpx;
				height: 72rpx;
				border-radius: 37rpx;
				border: 1px solid #BBBABA;
				font-size: 28rpx;
				color: #333333;
				margin-right: 90rpx;
				line-height: 72rpx;
				text-align: center;
			}

			.btn2 {
				width: 240rpx;
				height: 72rpx;
				background: #5E9FFD;
				border-radius: 37rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}
	}

	.listContainer {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 70vh;
		padding: 60rpx 30rpx;
		.itemContainer {
			width: 690rpx;
			height: 179rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			margin-top: 32rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				margin-left: 24rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.middle {
				margin-right: 40rpx;

				.top {
					width: 313rpx;
					font-size: 32rpx;
					color: #121212;
					margin-bottom: 14rpx;
				}

				.bottom {
					width: 313rpx;
					font-size: 24rpx;
					;
					line-height: 35rpx;
					color: #999999;
				}
			}

			.btn {
				width: 140rpx;
				height: 56rpx;
				background-color: #ff7927;
				border-radius: 28rpx;
				font-size: 28rpx;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>